<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>EVOLVE</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/style.css">

    <!-- JS
  ================================================== -->
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <!-- jQuery -->
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <!-- jQuery easing -->
	<script src="js/modernizr.custom.js" type="text/javascript"></script> <!-- Modernizr -->
    <script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> <!-- tabs, toggles, accordion -->
    <script src="js/custom.js" type="text/javascript"></script> <!-- jQuery initialization -->
  
    <!-- Responsive Menu -->
    <script src="js/jquery.meanmenu.js"></script> 
    <script>
    jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
    });
    </script>
	
	<!-- Prety photo -->
	<script src="js/jquery.prettyPhoto.js"></script>
	<script>
		$(document).ready(function(){
			$("a[data-gal^='prettyPhoto']").prettyPhoto();
		});
	</script>

	<!-- Tooltip -->
    <script src="js/tooltip.js"></script>

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>



	<!-- Primary Page Layout
	================================================== -->

<header class="header">
<div class="container">
<div class="logos columns">
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="EVOLVE" /></a></h1>
</div><!-- logo -->

<div class="twelve columns">
<nav class="main_menu">

<ul>
<li>
<a href="index.html">
Home
<div class="sub">
Get Started
</div>
</a>
<ul>
<li><a href="index.html">Home Version 1</a></li>
<li><a href="index-2.html">Home Version 2</a></li>
<li><a href="index-3.html">Home Version 3</a></li>
<li><a href="index-4.html">Home Version 4</a></li>
<li><a href="index-5.html">Home Version 5</a></li>
<li><a href="index-6.html">Home Version 6</a></li><li><a href="http://www.weidea.net">More</a></li>
</ul>
</li>

<li>
<a href="about-us.html">
Pages
<div class="sub">
Page Formats
</div>
</a>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-us-2.html">About Us 2</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="services-2.html">Services 2</a></li>
<li><a href="meet-the-team.html">Meet The Team</a></li>
<li><a href="meet-the-team-2.html">Meet The Team 2</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="full-width-page.html">Full Width Page</a></li>
<li><a href="page-right-sidebar.html">Right Sidebar</a></li>
<li><a href="page-left-sidebar.html">Left Sidebar</a></li>
<li><a href="404-error-page.html">404 Error Page</a></li>
</ul>
</li>

<li class="current_page_item">
<a href="#">
Shortcodes
<div class="sub">
Useful Shortcodes
</div>
</a>
<ul>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="dropcaps.html">Dropcaps</a></li>
<li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
<li><a href="grid-columns.html">Grid Columns</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>

<li>
<a href="portfolio-2-columns.html">
Portfolio
<div class="sub">
Awesome Stuff
</div>
</a>
<ul>
<li><a href="portfolio-1-column.html">1 Column</a></li>
<li><a href="portfolio-2-columns.html">2 Columns</a></li>
<li><a href="portfolio-3-columns.html">3 Columns</a></li>
<li><a href="portfolio-4-columns.html">4 Columns</a></li>
<li><a href="single-project-half.html">Single Project Half</a></li>
<li><a href="single-project-wide.html">Single Project Wide</a></li>
</ul>
</li>

<li>
<a href="blog-large.html">
The Blog
<div class="sub">
News & Events
</div>
</a>
<ul>
<li><a href="blog-large.html">Large Image</a></li>
<li><a href="blog-medium.html">Medium Image</a></li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>

<li>
<a href="contact.html">
Contact US
<div class="sub">
Write Message
</div>
</a>
</li>
</ul>

</nav><!-- navigation -->
</div>
<div class="clearfix"></div>
</div>
</header><!-- header -->

<div class="container">
<div class="sixteen columns page-title">
<div class="eight columns alpha">
<h3> <span>Accordion & Toggles</span> </h3>
</div>
<div class="eight columns omega">
<nav class="breadcrumbs">
<ul>
<li>You are here:</li>
<li>
<a href="#">Home</a>
</li>
<li>
Accordion & Toggles
</li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</div><!-- page-title -->
</div><!-- container -->

<div class="container">

	<div class="twelve columns">
                <!-- begin toggle -->
                <div data-id="open" class="toggle">
                    <span class="toggle-title"><i class="fa fa-laptop"></i>Title goes here</span>
                    <div class="toggle-inner">
                        <img src="images/services/services4.jpg" style="float:left; width:180px; margin:0 10px 0 0; padding:4px; border: 1px solid #DDDDDD; border-radius: 4px; background-color: #FFFFFF;">
						<p><span style="color: #04BFEA;">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title"><i class="fa fa-gift"></i>Title goes here</span>
                    <div class="toggle-inner">
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title">Title without icon</span>
                    <div class="toggle-inner">
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                    </div>
                </div>
                <!-- end toggle -->	
				
	<div class="separator"></div>
				
	<div class="six columns alpha">
	  <h3>Accordion Style</h3>
                <div class="accordion">
				
                    <div>
                        <span class="accordion-title"><i class="fa fa-laptop"></i>Title goes here</span>
                        <div class="accordion-inner">
                          <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                        </div>
                    </div>
                        
                    <div>
                        <span class="accordion-title"><i class="fa fa-gift"></i>Title goes here</span>
                        <div class="accordion-inner">
                          <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                        </div>
                    </div>
                        
                    <div>
                        <span class="accordion-title"><i class="fa fa-css3"></i>Title goes here</span>
                        <div class="accordion-inner">
                          <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                        </div>
                    </div>
                        
                </div>
	</div>
	
	<div class="six columns omega">
	  <h3>Toggle Style</h3>
                <!-- begin toggle -->
                <div data-id="open" class="toggle">
                    <span class="toggle-title"><i class="fa fa-laptop"></i>Title goes here</span>
                    <div class="toggle-inner">
                        <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title"><i class="fa fa-gift"></i>Title goes here</span>
                    <div class="toggle-inner">
                        <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                    </div>
                </div>
                <!-- end toggle -->
                
                <!-- begin toggle -->
                <div data-id="closed" class="toggle">
                    <span class="toggle-title"><i class="fa fa-css3"></i>Title without icon</span>
                    <div class="toggle-inner">
                        <p>Duis ute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore...</p>
                    </div>
                </div>
                <!-- end toggle -->	
	</div>
				
	</div>
	
            	<!-- Sidebar -->
				<div class="four columns sidebar">
					<!-- Latest Projects -->
					<h3 style="margin-bottom: 20px;">Latest Projects</h3>
					<div class="latest-project">
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-1.jpg" alt=""></a>
						</div>
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-2.jpg" alt=""></a>
						</div>
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-3.jpg" alt=""></a>
						</div>
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-4.jpg" alt=""></a>
						</div>
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-5.jpg" alt=""></a>
						</div>
						<div class="latest-project-item">
							<a href="#"><img src="images/portfolio/rp-6.jpg" alt=""></a>
						</div>
					</div>
					<!-- End Latest Project -->
					<!-- Twitter Widget -->
					<h3>Twitter Widget</h3>
					<div class="twitter">
						<ul>
							<li>
							<span>Et harum quidem rerum facilis est et expedita distinctio <a href="#" class="link">http://twitter.com</a></span>
							<span class="twit-date">Jan 7, 2013</span>
							</li>
							<li>
							<span>Nam libero tempore, cum soluta nobis est eligendi :) <a href="#" class="link">http://twitter.com</a></span>
							<span class="twit-date">Jan 7, 2013</span>
							</li>
						</ul>
					</div>
					<!-- End Twitter Widget -->
				</div>
				<!-- End Sidebar -->
				
				<div class="clearfix"></div>

				
</div><!-- container -->

	<footer class="footer">
    <div class="container">
	<div class="footer-top clearfix">
	<div class="four columns">
	<h3>About Us</h3>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
    <p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p>
	</div>
	<div class="four columns">
						<h3>Latest Tweets</h3>
						<div class="twitter">
							<ul>
								<!-- Twitter Message 1 -->
								<li>
									<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
								<!-- Twitter Message 2 -->
								<li>
									<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aliquid :) <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
							</ul>
						</div>
</div>
<div class="four columns">
<h3>Flickr Stream</h3>
						<div class="latest-project">
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-1.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-2.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-3.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-4.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-5.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-6.jpg" alt=""></a>
							</div>
						</div>
</div>
<div class="four columns">
						<h3>Contact Information</h3>
						<ul class="list contact" style="margin-bottom: 15px;">
							<li class="contact-address"><i class="fa fa-map-marker"></i><span>103088. Ut wisi enim ad minim veniam, quis nostrud.</span></li>
							<li class="contact-mail"><i class="fa fa-envelope"></i><a class="link" href="#">mail@mail.com</a></li>
							<li class="contact-phone"><i class="fa fa-phone"></i><span>+1 (229) 991-22-11</span></li>
							<li class="contact-address"><i class="fa fa-clock-o"></i><span>Monday-Friday: 9:<sup>00</sup> - 18:<sup>00</sup><br>
							Saturday: 10:<sup>00</sup> - 17:<sup>00</sup><br>
							Sunday: closed</span>
							</li>
						</ul>
		
<div class="tooltips">			
			<ul class="social-icons-footer">
				<li><a href="#" data-rel="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Google+"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
			</ul>
</div>

</div>
	</div><!-- footer-top -->
	</div>

	<div class="container">
	<div class="footer-bottom clearfix">
	<div class="eight columns">
	<p>Copyright &copy; 2014 <a href="#">alphawd</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>.</p>
	</div>
	<div class="eight columns">
	<nav class="footer-nav">
<ul>
<li>
<a class="first" href="index.html">Home</a>
/
</li>
<li>
<a href="#">Shortcodes</a>
/
</li>
<li>
<a href="portfolio-2-columns.html">Portfolio</a>
/
</li>
<li>
<a href="blog-large.html">Blog</a>
/
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div><!-- footer-bottom -->
</div>
	
</footer><!-- footer -->

<!-- End Document
================================================== -->
</body>
</html>